.im-box{
    color:#333;width:800px;height:522px;box-sizing: border-box;overflow: hidden;background: #fff;border: 1px solid #f2f2f2;
    padding:0px 0px 0px 200px;position: relative;box-shadow:1px 1px 50px rgba(0,0,0,.3);margin: auto;
}
.im-box .im-friends{width:200px;height:100%;padding:60px 0px 0px 0px;position: absolute;top:0;left:0;background: #e2e2e2;box-sizing: border-box;}
.im-box .im-friends .im-friends-title{padding-left:10px;line-height: 60px;background: #EDEAE8;position: absolute;top:0;left:0;width:100%;}
.im-box .im-friends .im-friend-list{width:100%;height:100%;padding:0px;margin:0px;overflow-x: hidden;overflow-y: auto;}
.im-box .im-friends .im-friend-item{padding-left:60px;line-height: 60px;overflow: hidden;background: #e3e0de;position: relative;cursor: pointer;}

.im-box .im-friends .im-friend-item .im-friend-avater{width:40px;height:40px;position: absolute;top:10px;left:10px;border-radius: 3px;}
.im-box .im-friends .im-friend-item:hover,.im-box .im-friends .current{background:#D1D1D1;}

.im-box .im-interaction{width:100%;height:100%;padding:60px 0px 158px 0px;overflow: hidden;position: relative;box-sizing: border-box;}
.im-box .im-title{width:100%;height:60px;padding:0px 0px 0px 80px;line-height:60px;box-sizing: border-box;position: absolute;top:0;left:0px;background: #f2f2f2;}
.im-box .im-title .im-avater{width:40px;height: 40px;border-radius: 50%;position: absolute;top:10px;left:10px;}
.im-box .im-title .im-close{position: absolute;top:10px;right:10px;line-height:normal;}

.im-box .im-messages{margin: 0px;padding: 0px;overflow-x: hidden;overflow-y: auto;width:100%;height: 100%;}
.im-box .im-messages .message-left{padding:10px 10px 10px 80px;width:100%;position: relative;overflow: hidden;float:none;clear:both;box-sizing:border-box;}
.im-box .im-messages .message-right{padding:10px 80px 10px 10px;width:100%;position: relative;overflow: hidden;float:none;clear:both;box-sizing:border-box;}

.im-box .im-messages .send-message{
    background:#e2e2e2;border-radius:3px;width: auto;display:inline-block;
    word-break:break-all;
    line-height:22px;padding: 10px;
}
.im-box .im-messages .message-right .send-message{
    background: #5FB878;color: #fff;float:right;
}

.im-box .im-messages .send-message:after{
    content:' ';left:69px;top:53px;width:0;height:0;border-style:solid dashed dashed;
    border-color:#e2e2e2 transparent transparent;overflow:hidden;border-width:10px;position: absolute;
}
.im-box .im-messages .message-right .send-message:after{
    left: inherit;right:70px;top:53px;border-top-color:#5FB878;
}
.im-box .im-messages .send-avater{
    position: absolute;top:10px;left:10px;width: 50px;height: 50px;border-radius:5px;
}
.im-box .im-messages .message-right .send-avater{
    top:10px;right:10px;left:inherit;
}
.im-box .im-messages .send-tips{
    font-size: 1px;color: #808080;padding:5px 0px;width:100%;box-sizing: border-box;
}
.im-box .im-messages .message-right .send-tips{
    top:10px;right:10px;float: right;text-align: right;
}

.im-box .im-send{width:100%;height:158px;padding:0; border-top: 1px solid #f2f2f2;position: absolute;bottom:0;left:0px;box-sizing:border-box;}
.im-box .im-send .im-tools{width:100%;height:38px;margin:0;padding:0;list-style: none;background: #f2f2f2;overflow: hidden;}
.im-box .im-send .im-tools li{padding:2px 0px;cursor: pointer;width:32px;float:left;}
.im-box .im-send .im-tools .im-tools-emoji{padding:2px 0px;cursor: pointer;}
.im-box .im-send .im-send-text{
    width:100%;height:120px;border: none;overflow:auto;
    resize:none;background:0 0;-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0;
    padding:5px 10px;
}
.im-box .im-send .im-send-btn{
    position: absolute;height:30px;bottom:10px;right:10px;
    background:#5FB878;color:#fff;border: none;border-radius: 3px;
    font-size:14px;line-height:32px;padding:0 20px;cursor: pointer;
}
.emoji-list{position: absolute;width:198px;height:240px;top:-250px;left:10px;margin:0;padding:0;border:1px solid #e2e2e2;list-style: none;background:#fff;display: none;}
.emoji-list:after{
    content:' ';left:11px;bottom:-21px;width:0;height:0;border-style:solid dashed dashed;
    border-color:#e2e2e2 transparent transparent;overflow:hidden;border-width:10px;position: absolute;
}
.emoji-list li{float:left;padding:0;margin:0;}

.im-switch{position: absolute;width: 50px;height: 50px;right: 10px;bottom:10px;cursor: pointer;}
.im-switch img{width:100%;height:100%;}
